<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="assets/styles/search.css">

</head>
<body style="overflow-x:hidden;background:#f3f3f3;">
    <div id="goodsList">
    <div class="btn-div clearfix">
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demoModal-1"@click="refresh">返回商品列表</button>
        <div class="search-box">
            <form action="">
                <select v-model="selected" >
                    <option v-for="option in options2" :value="option.value">
                        {{ option.text }}
                    </option>
                </select>
                <input  placeholder="编辑我……" v-model.trim="searchInput2">
                <button type="button" class="btn btn-success" @click="searchBtn2">搜索</button>
            </form>
        </div>
    </div>
    <div>
        <table class="table table-condensed">
            <thead>
                <tr>
                  <!--  <th>序号</th>-->
                    <th>商品Id</th>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品库存</th>
                    <th>价格</th>
                    <th>商品可用库存</th>
                    <th>商品锁定库存</th>
                </tr>
            </thead>
            <tbody>
            <template v-for="list in goodsListDate.list" v-cloak>
                <tr>
                   <!-- <td>
                        <input type="radio" :value="list.goodsId" v-model="checkedDate" >
                        &lt;!&ndash;<label>{{checkedDate}}</label>&ndash;&gt;
                    </td>-->
                    <td>{{list.goodsId}}</td>
                    <td>{{list.goodsCode}}</td>
                    <td>{{list.goodsName}}</td>
                    <td>{{list.totalStock}}</td>
                    <td>{{list.goodsPrice}}</td>
                    <td>{{list.availableStock}}</td>
                    <td>{{list.lockedStock}}</td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
    <!-- 弹出框 -->
    <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">title</h4>
                </div>
                <div class="modal-body">提示内容</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
        <div class="footer-pager">
            <!--解析显示分页信息-->
            <!--分页文字信息-->
            <span>共{{goodsListDate.pages}}页，当前第{{goodsListDate.pageNum}}页，总{{goodsListDate.total}}条数据</span>
            <!--分页条信息-->
            <ul class="pagination">
                <!--如果无上一页，不可点-->
                <template v-if="goodsListDate.hasPreviousPage==false">
                    <li><a href="#">&laquo;</a></li>
                </template>
                <!--如果有上一页，可点-->
                <template v-if="goodsListDate.hasPreviousPage==true">
                    <!--点前一页，跳到当前页码前一页-->
                    <li @click="to_page(goodsListDate.pageNum-1)"><a href="#">&laquo;</a></li>
                </template>

                <!--遍历连续显示的页码-->
                <template v-for="pagenum in goodsListDate.navigatepageNums">
                    <!--如果是当前页码，高亮显示-->
                    <template v-if="pagenum==goodsListDate.pageNum">
                        <li class="active"><a href="#">{{pagenum}}</a></li>
                    </template>
                    <!--如果不是当前页码，正常显示-->
                    <template v-if="pagenum!=goodsListDate.pageNum">
                        <!--点击后把当前页码传送给axios-->
                        <li class @click="to_page(pagenum)"><a href="#">{{pagenum}}</a></li>
                    </template>
                </template>

                <!--如果无下一页，不可点-->
                <template v-if="goodsListDate.hasNextPage==false">
                    <li><a href="#">&raquo;</a></li>
                </template>
                <!--如果有下一页，可点-->
                <template v-if="goodsListDate.hasNextPage==true">
                    <!--把当前页码的下一页传送给axios-->
                    <li @click="to_page(goodsListDate.pageNum+1)"><a href="#">&raquo;</a></li>
                </template>
            </ul>
        </div>
    </div>
</body>
<script>
</script>

<script src="/commons/plugins/iview/js/vue.min.js"></script>
<script src="/commons/plugins/iview/js/vue-router.js"></script>
<script type="text/javascript" src="/commons/plugins/iview/js/axios.min.js"></script>
<script type="text/javascript" src="/commons/js/axiosUtils.js"></script>
<script type="text/javascript" src="/page/js/goodsList.js"></script>
</html>